

<!--<button class="btn btn-default" ng-model="isCollapsed" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr>-->
<div id="formulaContainer" collapse="isCollapsed" style="visibility: hidden" >
    <div class="well well-lg" style="padding-top: 10px; padding-bottom: 10px">
        <div class="row">
            <div class="col-sm-11" style="text-align: center">
                <div class="row">
                    <div class="col-sm-12">
                        <img src="{{IMAGE_SRC}}" >
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <span ng-bind-html="NAME | unsafe" ></span>
                    </div>
                </div>

            </div>
            <div class="col-sm-1" style="padding-top: 23px">
                <button class="close" type="button" data-ng-click="isCollapsed = !isCollapsed" >×</button>
            </div>
        </div>
        <!--<div class="col-sm-12">
            <strong ng-bind-html="NAME | unsafe" ></strong>
        </div>-->
    </div>
</div>


<table id="myTable" ng-table="tableParams" class="table" >
    <tbody ng-repeat="group in $groups" ng-show="rows.length > 0">
    <tr class="ng-table-group">
        <!-- KPI / Component -->
        <td>
            <a href="" ng-click="tableHeaderClick(group, $groups); " class="TableKpiHeaderStyle" style="margin-left: -30px">
                                        <span class="glyphicon"
                                              ng-class="{ 'glyphicon-chevron-down': group.$hideRows, 'glyphicon-chevron-right': !group.$hideRows }"></span>
                <strong ng-bind-html="getGroupText(group.value, reportVo.fullComponentsList) | unsafe" class="TableKpiHeaderStyle"></strong>
            </a>
        </td>


        <!-- Target Column -->
        <td style="text-align: right">
            <a href="" ng-click="tableHeaderClick(group); " class="TableKpiHeaderStyle" style="margin-right: -28px">
                <strong ng-bind-html="getGroupTarget(group.value, reportVo.fullComponentsList) | unsafe" class="TableKpiHeaderStyle"></strong>
            </a>
        </td>


        <!-- Value Column -->
        <td class="numbers-style">

            <a href="" ng-click="group.$hideRows = !group.$hideRows " class="TableKpiHeaderStyle" >
                <strong  ng-bind-html="getGroupValue(group.value, reportVo.fullComponentsList)| unsafe"
                         class="TableKpiHeaderStyle"></strong>
            </a>

             <a href="" class="glyphicon glyphicon-list-alt" data-ng-click="showEquation(this, group.value, getGroupText(group.value, reportVo.fullComponentsList))"
                   popover="Show Formula" popover-trigger="mouseenter"
                   popover-placement="left"
                   popover-popup-delay="250">
             </a>
        </td>

    </tr>
    <tr ng-hide="!group.$hideRows" ng-repeat="user in group.data" >
        <td sortable="name" data-title="'KPI / Component '">
            <span style="margin-left: -5px;" ng-bind-html="user['ZEHFIRKPI__ZEHFIRKPI_TXT'] | unsafe"></span>
        </td>

        <td sortable="name" data-title="'Target'" class="numbers-style" style="margin-right: 35px">
        </td>

        <td sortable="name" data-title="'Actual'" class="numbers-style" style="margin-right: 35px">
            <span  style="margin-right: 46px" ng-bind-html=" user['VALUE001'] | unsafe"> </span>
        </td>
    </tr>
    </tbody>
</table>